<template>
  <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="all">
    <van-collapse v-model="activeNames">
      <van-collapse-item v-for="(item,index) in list" :key="index" :title="item.department_name" :name="index">
        <van-collapse-item v-for="(item2,index2) in item.children" :key="index2" :title="item2.department_name"
          :name="index2">
          <van-collapse-item v-for="(item3,index3) in item2.children" :key="index3" :title="item3.department_name"
            :name="index3">

          </van-collapse-item>
        </van-collapse-item>
      </van-collapse-item>

    </van-collapse>
  </van-list>
</template>

<script>
  import {
    DeptService
  } from '@/api'
  export default {
    data() {
      return {
        list: [],
        loading: false,
        finished: false,
        activeNames: [0],
        page: 1,
        limit: 10,
      };
    },
    methods: {
      onLoad() {
        // 异步更新数据
        this.loading = true;
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        DeptService.getList({
          page: this.page,
          limit: this.limit
        }).then(res => {
          console.log(res);
          this.loading = false;
          if (res.data.length < this.limit) {

            this.list = this.list.concat(res.data)
            this.finished = true;
          } else {

            this.page++;
            this.list = this.list.concat(res.data)
          }


        })

      },
    },
  };
</script>

<style lang="less" scoped>
  .all {
    padding: 24px 0;
    background-color: #f3f5f7;
    height: 100%;
  }
</style>